<template>
  <div class="params-info" v-if="Object.keys(paramsInfo).length !== 0">
    <table>
      <tr v-for="(item, index) in paramsInfo.rules" :key="index">
        <td v-for="(td, index) in item" :key="index">
          {{td}}
        </td>
      </tr>
    </table>
    <table class="infos">
       <tr v-for="(item, index) in paramsInfo.infos" :key="index">
        <td >{{item.key}}</td>
        <td class="info-values">{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
name:"DetailParamsInfo",
props:{
  paramsInfo:{
    type: Object,
    default(){
      return {}
    }
  }
}
}

</script>
<style scoped>
.params-info{
  border-top: 5px solid #f2f5f8;
}
table{
  width: 100%;
  padding: 0 10px;
}
td{
   height: 40px;
  line-height: 40px;
  text-align:center ;
  border-bottom: 1px solid #eee;
}

tr td:nth-child(1){
  text-align: left;
}
.infos td{
  text-align: left;
  font-size: 14px;
}
.infos tr td:nth-child(1){
  width: 30%;
}
.info-values{
  color: #eb4868;
}
</style>